<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问CSS</title>
    <style>
        #d1 {
            width: 200px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        function f1() {
            let d1 = document.getElementById("d1");
            d1.style.width = "400px";
            d1.style.height = "200px";
            // 如果样式名格式为xxx-yyy,则此时在DOM中操作时样式名为xxxYyy
            d1.style.backgroundColor = "green";
        }

        function f2() {
            let image = document.getElementById("image");
            image.style.left = parseFloat(image.style.left) + 50 + "px";
        }

        function f3() {
            let d3 = document.getElementById("d3");
            if (parseFloat(d3.style.width) < 100) {
                d3.style.width = parseFloat(d3.style.width) + 2 + "%";
            }

        }
    </script>
</head>
<body>
<div id="d1" onclick="f1()"></div>
<hr>
<img onmousemove="f2()" id="image" style="position: relative;left: 0px;" src="../images/heihei.gif" alt="图片加载失败">
<hr>
<div id="d2" style="width: 1000px;height: 50px;border: 1px solid black;">
    <div id="d3" style="height: 100%;width: 2%;background-color: red;" onmousemove="f3()"></div>
</div>
</body>
</html>